@{
    ViewData["Title"] = "工单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container-fluid">
    <h2 class="mb-4">工单管理</h2>
    
    <!-- 搜索区域 -->
    <div class="card mb-4">
        <div class="card-body">
            <!-- 简单搜索 -->
            <div class="row" id="simpleSearchRow">
                <div class="col-md-4">
                    <label for="searchCode" class="form-label">工单编号</label>
                    <input type="text" id="searchCode" class="form-control" placeholder="请输入工单编号">
                </div>
                <div class="col-md-4">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button id="btnSearch" class="btn btn-primary">搜索</button>
                        <button id="btnReset" class="btn btn-secondary">重置</button>
                        <button id="btnAdvancedSearch" class="btn btn-outline-info">高级查询</button>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button id="btnAdd" class="btn btn-success">新增工单</button>
                        <button id="btnStart" class="btn btn-primary" style="margin-left: 10px;" disabled>▶ 开始</button>
                        <button id="btnFinish" class="btn btn-warning" style="margin-left: 5px;" disabled>⏹ 结束</button>
                        <button id="btnDelete" class="btn btn-outline-danger" style="margin-left: 5px;" disabled>🗑 删除</button>
                        <button id="btnExport" class="btn btn-info" style="margin-left: 5px;">📊 导出</button>
                    </div>
                </div>
            </div>

            <!-- 高级搜索区域（默认隐藏） -->
            <div id="advancedSearchArea" style="display: none;">
                <hr class="my-3">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="searchProductCode" class="form-label">产品编号</label>
                        <input type="text" id="searchProductCode" class="form-control" placeholder="请输入产品编号">
                    </div>
                    <div class="col-md-3">
                        <label for="searchProductName" class="form-label">产品名称</label>
                        <input type="text" id="searchProductName" class="form-control" placeholder="请输入产品名称">
                    </div>
                    <div class="col-md-3">
                        <label for="searchSpec" class="form-label">产品规格</label>
                        <input type="text" id="searchSpec" class="form-control" placeholder="请输入产品规格">
                    </div>
                    <div class="col-md-3">
                        <label for="searchUnit" class="form-label">单位</label>
                        <input type="text" id="searchUnit" class="form-control" placeholder="请输入单位">
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="searchActualQuantity" class="form-label">实际数量</label>
                        <input type="number" id="searchActualQuantity" class="form-control" placeholder="请输入实际数量">
                    </div>
                    <div class="col-md-3">
                        <label for="searchStatus" class="form-label">状态</label>
                        <select id="searchStatus" class="form-control">
                            <option value="">全部</option>
                            <option value="未开始">未开始</option>
                            <option value="进行中">进行中</option>
                            <option value="已完成">已完成</option>
                            <option value="已暂停">已暂停</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="searchCreateBy" class="form-label">创建人</label>
                        <input type="text" id="searchCreateBy" class="form-control" placeholder="请输入创建人">
                    </div>
                </div>

                <!-- 时间范围查询 -->
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">计划开始时间</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="datetime-local" id="searchPlannedStartTimeStart" class="form-control">
                            </div>
                            <div class="col-6">
                                <input type="datetime-local" id="searchPlannedStartTimeEnd" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">计划结束时间</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="datetime-local" id="searchPlannedEndTimeStart" class="form-control">
                            </div>
                            <div class="col-6">
                                <input type="datetime-local" id="searchPlannedEndTimeEnd" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">实际开始时间</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="datetime-local" id="searchActualStartTimeStart" class="form-control">
                            </div>
                            <div class="col-6">
                                <input type="datetime-local" id="searchActualStartTimeEnd" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">实际结束时间</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="datetime-local" id="searchActualEndTimeStart" class="form-control">
                            </div>
                            <div class="col-6">
                                <input type="datetime-local" id="searchActualEndTimeEnd" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">创建时间</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="datetime-local" id="searchCreateTimeStart" class="form-control">
                            </div>
                            <div class="col-6">
                                <input type="datetime-local" id="searchCreateTimeEnd" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 高级搜索操作按钮 -->
                <div class="row advanced-search-buttons">
                    <div class="col-12 text-center">
                        <button id="btnAdvancedSearchExecute" class="btn btn-primary">执行查询</button>
                        <button id="btnAdvancedReset" class="btn btn-secondary">重置条件</button>
                        <button id="btnCollapseSearch" class="btn btn-outline-secondary">收起</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 工单列表 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th width="50">选择</th>
                            <th>序号</th>
                            <th>工单编号</th>
                            <th>产品</th>
                            <th>产品编号</th>
                            <th>产品名称</th>
                            <th>规格</th>
                            <th>单位</th>
                            <th>计划数量</th>
                            <th>状态</th>
                            <th>计划开始时间</th>
                            <th>计划结束时间</th>
                            <th>实际开始时间</th>
                            <th>实际结束时间</th>
                            <th>工序数</th>
                            <th>创建人</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="workOrderTableBody">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <nav aria-label="工单列表分页">
                <ul class="pagination justify-content-center" id="pagination">
                    <!-- 分页将通过JavaScript动态生成 -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 工单详情内容容器（用于layer弹窗） -->
<div id="workOrderDetailContent" style="display: none; padding: 20px;">
    <!-- 工单详情内容将通过JavaScript动态填充 -->
</div>

@section Scripts {
    <script>
        // 从后端配置中获取API地址
        window.ApiConfig = {
            readApiUrl: '@ViewBag.ReadApiUrl',
            writeApiUrl: '@ViewBag.WriteApiUrl'
        };
    </script>
    <script src="~/js/workorder-management.js"></script>
    <style>
        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .status-未开始 {
            background-color: #f8f9fa;
            color: #6c757d;
            border: 1px solid #dee2e6;
        }
        
        .status-进行中 {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        
        .status-已完成 {
            background-color: #d1edff;
            color: #004085;
            border: 1px solid #b8daff;
        }
        
        .status-已暂停 {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .work-order-code {
            color: #007bff;
            text-decoration: none;
            font-weight: 500;
        }
        
        .work-order-code:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        
        .process-count-badge {
            background-color: #e9ecef;
            color: #495057;
            padding: 0.25rem 0.5rem;
            border-radius: 50px;
            font-size: 0.75rem;
        }
        
        /* 高级搜索区域样式 */
        #advancedSearchArea {
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-top: 0.5rem;
        }
        
        #advancedSearchArea .form-label {
            color: #495057;
            font-weight: 500;
            font-size: 0.875rem;
        }
        
        #advancedSearchArea .form-control {
            border-color: #dee2e6;
            font-size: 0.875rem;
        }
        
        #advancedSearchArea .form-control:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        #advancedSearchArea hr {
            border-color: #dee2e6;
            opacity: 0.5;
        }
        
        .advanced-search-buttons {
            border-top: 1px solid #dee2e6;
            padding-top: 1rem;
            margin-top: 1rem;
        }
        
        /* 表格样式优化 */
        .table th, .table td {
            white-space: nowrap;
            font-size: 0.875rem;
        }
        
        /* 操作列按钮样式 */
        .btn-group-sm .btn {
            margin-right: 2px;
            margin-bottom: 2px;
        }
        
        .btn-group-sm .btn:last-child {
            margin-right: 0;
        }
        
        /* 操作列宽度调整 */
        .table th:last-child,
        .table td:last-child {
            min-width: 160px;
            width: 160px;
        }
        
        /* 顶部按钮样式 */
        .btn[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 单选框样式 */
        .workorder-select {
            transform: scale(1.2);
            cursor: pointer;
            /* 强制各浏览器显示原生单选样式 */
            -webkit-appearance: radio !important;
            appearance: auto !important;
            width: 16px;
            height: 16px;
            accent-color: #0d6efd;
        }
        
        /* 选择列居中 */
        .table th:first-child,
        .table td:first-child {
            text-align: center;
            vertical-align: middle;
            padding-left: 8px;
            padding-right: 8px;
        }
        
        /* 操作按钮组样式 */
        .btn-group-sm {
            flex-wrap: wrap;
            gap: 2px;
        }
        
        .table th:nth-child(4), .table th:nth-child(5), .table th:nth-child(6) {
            min-width: 120px;
        }
        
        .table th:nth-child(10), .table th:nth-child(11), 
        .table th:nth-child(12), .table th:nth-child(13) {
            min-width: 140px;
        }
        
        .table td:nth-child(10), .table td:nth-child(11), 
        .table td:nth-child(12), .table td:nth-child(13) {
            font-size: 0.75rem;
        }
        
        /* Layer弹窗内容样式 */
        .layui-layer-content {
            overflow-y: auto !important;
        }
        
        .layui-layer-content .table-responsive {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .layui-layer-content .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .layui-layer-content .status-未开始 {
            background-color: #f8f9fa;
            color: #6c757d;
            border: 1px solid #dee2e6;
        }
        
        .layui-layer-content .status-进行中 {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        
        .layui-layer-content .status-已完成 {
            background-color: #d1edff;
            color: #004085;
            border: 1px solid #b8daff;
        }
        
        /* 弹窗表单样式优化 */
        .layui-layer-content .layui-form-label {
            width: 100px;
            padding: 9px 10px;
        }
        
        .layui-layer-content .layui-input-block {
            margin-left: 110px;
        }
        
        .layui-layer-content .layui-table {
            margin-top: 0;
        }
        
        .layui-layer-content .layui-table th, 
        .layui-layer-content .layui-table td {
            padding: 8px 10px;
            font-size: 12px;
        }
        
        .layui-layer-content .layui-input {
            height: 32px;
            line-height: 32px;
        }
        
        .layui-layer-content .layui-btn-xs {
            padding: 1px 8px;
            font-size: 11px;
        }
    </style>
}
